<template>
  <BasicDrawer @register="registerDrawer" :title="title" :width="580" destroyOnClose @ok="handleSubmit">
    <BasicForm @register="registerForm" />
  </BasicDrawer>
</template>

<script lang="ts">
  import { defineComponent, ref, unref, computed } from 'vue'
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'
  import { BasicForm, useForm } from '/@/components/Form'
  import { getUserDepartList } from '../../user/user.api'
  import { tenantUserSchema } from '../tenant.data'
  import { saveOrUpdateTenantUser } from '../tenant.api'

  export default defineComponent({
    name: 'TenantUserDrawer',
    components: {
      BasicDrawer,
      BasicForm,
    },
    emits: ['success', 'register'],
    setup(_p, { emit }) {
      const status = ref<string>('')
      const isUpdate = ref(false)
      const title = computed(() => {
        return isUpdate.value ? '编辑人员' : '添加人员'
      })

      //表单
      const [registerForm, { setFieldsValue, resetFields, validate, setProps, clearValidate }] = useForm({
        schemas: tenantUserSchema,
        showActionButtonGroup: false,
        labelCol: { span: 24 },
        wrapperCol: { span: 24 },
      })

      const showFooter = ref<boolean>(true)
      // modal
      const [registerDrawer, { closeDrawer, setDrawerProps }] = useDrawerInner(async (data) => {
        isUpdate.value = data.isUpdate
        await resetFields()
        showFooter.value = data?.showFooter ?? true
        setDrawerProps({ showFooter: showFooter.value })
        if (unref(isUpdate)) {
          const userDepart = await getUserDepartList({ userId: data.record.id })
          let departData: any = ''
          if (userDepart && userDepart.length > 0) {
            departData = userDepart.map((item) => item.value)
          }
          let formData = {
            ...data.record,
            selecteddeparts: departData,
            selectedroles: data.record.selectedroles,
          }
          status.value = data.status
          await setFieldsValue(formData)
        }
        // 隐藏底部时禁用整个表单
        setProps({ disabled: !data?.showFooter })
        if (!data?.showFooter) {
          await clearValidate()
        }
      })

      const confirmLoading = ref<boolean>(false)

      //提交事件
      async function handleSubmit() {
        const data: any = await validate()
        if (!data.username) {
          data.username = data.phone
        }
        data.password = '123456'
        confirmLoading.value = true
        await saveOrUpdateTenantUser(data, isUpdate.value)
        confirmLoading.value = false
        emit('success')
        handleClose()
      }

      /**
       * 取消
       */
      function handleClose() {
        closeDrawer()
      }

      return {
        isUpdate,
        title,
        registerForm,
        registerDrawer,
        handleSubmit,
        handleClose,
        status,
        confirmLoading,
      }
    },
  })
</script>
